<template>
  <div>
    <el-form :model="formData" :rules="formRules" label-width="120px">
      <el-form-item label="节点 id" prop="id">
        <el-input v-model="formData.id" />
      </el-form-item>
      <el-form-item label="节点名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="节点描述" prop="documentation">
        <el-input v-model="formData.documentation" />
      </el-form-item>
      <el-form-item label="执行监听器" prop="executionListener">
        <el-badge :value="executionListenerLength">
          <el-button @click="dialogName = 'executionListenerDialog'">编辑</el-button>
        </el-badge>
      </el-form-item>
      <el-form-item v-if="showConfig.taskListener" label="任务监听器" prop="taskListener">
        <el-badge :value="taskListenerLength">
          <el-button @click="dialogName = 'taskListenerDialog'">编辑</el-button>
        </el-badge>
      </el-form-item>
      <el-form-item v-if="showConfig.userType" label="用户类型" prop="userType">
        <el-select v-model="formData.userType">
          <el-option
            v-for="item in userTypeOption"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="showConfig.assignee && formData.userType === 'assignee'"
        label="指定人员"
        prop="checkSingleUser"
      >
        <el-input placeholder="请选择人员" class="input-with-select" v-model="checkValues">
          <template #append>
            <!--指定用户-->
            <el-button style="padding-left: 7px" icon="User" @click="singleUserCheck" />
            <!--            暂无表达式概念-->
            <!--            <el-divider direction="vertical" />-->
            <!--            &lt;!&ndash;选择表达式&ndash;&gt;-->
            <!--            <el-button-->
            <!--              style="padding-right: 7px"-->
            <!--              icon="Postcard"-->
            <!--              @click="singleExpCheck('assignee')"-->
            <!--            />-->
          </template>
        </el-input>
      </el-form-item>
      <!--      暂无候选人员概念-->
      <!--      <el-form-item-->
      <!--        v-if="showConfig.candidateUsers && showConfig.userType === 'candidateUsers'"-->
      <!--        label="候选人员"-->
      <!--        prop="checkMultipleUser"-->
      <!--      >-->
      <!--        <el-input placeholder="请选择候选用户" class="input-with-select" v-model="checkValues">-->
      <!--          <template #append>-->
      <!--            &lt;!&ndash;候选用户&ndash;&gt;-->
      <!--            <el-button style="padding-left: 7px" icon="User" @click="multipleUserCheck" />-->
      <!--            <el-divider direction="vertical" />-->
      <!--            &lt;!&ndash;选择表达式&ndash;&gt;-->
      <!--            <el-button-->
      <!--              style="padding-right: 7px"-->
      <!--              icon="Postcard"-->
      <!--              @click="singleExpCheck('candidateUsers')"-->
      <!--            />-->
      <!--          </template>-->
      <!--        </el-input>-->
      <!--      </el-form-item>-->
      <!--      暂无候选角色概念-->
      <!--      <el-form-item-->
      <!--        v-if="showConfig.candidateGroups && showConfig.userType === 'candidateGroups'"-->
      <!--        label="候选角色"-->
      <!--        prop="checkRole"-->
      <!--      >-->
      <!--        <el-input placeholder="请选择候选角色" class="input-with-select" v-model="checkValues">-->
      <!--          <template #append>-->
      <!--            &lt;!&ndash;候选角色&ndash;&gt;-->
      <!--            <el-button style="padding-left: 7px" icon="User" @click="multipleRoleCheck" />-->
      <!--            <el-divider direction="vertical" />-->
      <!--            &lt;!&ndash;选择表达式&ndash;&gt;-->
      <!--            <el-button-->
      <!--              style="padding-right: 7px"-->
      <!--              icon="Postcard"-->
      <!--              @click="singleExpCheck('candidateGroups')"-->
      <!--            />-->
      <!--          </template>-->
      <!--        </el-input>-->
      <!--      </el-form-item>-->
      <el-form-item
        v-if="showConfig.role && ['deptRole', 'orgRole', 'companyRole'].includes(formData.userType)"
        label="指定角色"
        prop=""
      >
        <el-input placeholder="请选择角色" class="input-with-select" readonly v-model="checkValues">
          <template #append>
            <el-button style="padding-left: 12px" icon="User" @click="multipleRoleCheck" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        v-if="showConfig.role && ['deptPost', 'orgPost', 'companyPost'].includes(formData.userType)"
        label="指定岗位"
        prop=""
      >
        <el-input placeholder="请选择岗位" class="input-with-select" readonly v-model="checkValues">
          <template #append>
            <el-button style="padding-left: 12px" icon="User" @click="multiplePostCheck" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="多实例" prop="multiInstance">
        <el-badge :is-dot="hasMultiInstance">
          <el-button @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
        </el-badge>
      </el-form-item>
      <el-form-item v-if="showConfig.async" label="异步" prop="async">
        <el-switch v-model="formData.async" active-text="是" inactive-text="否" />
      </el-form-item>
      <el-form-item v-if="showConfig.priority" label="优先级" prop="priority">
        <el-input v-model="formData.priority" />
      </el-form-item>
      <!--      <el-form-item v-if="showConfig.formKey" label="表单标识key" prop="formKey">-->
      <!--        <el-select v-model="formData.formKey" clearable>-->
      <!--          <el-option-->
      <!--            v-for="item in formList"-->
      <!--            :key="item.formId"-->
      <!--            :value="item.formId"-->
      <!--            :label="item.formName"-->
      <!--          />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item v-if="showConfig.skipExpression" label="跳过表达式" prop="skipExpression">
        <el-input v-model="formData.skipExpression" />
      </el-form-item>
      <el-form-item v-if="showConfig.isForCompensation" label="是否为补偿" prop="isForCompensation">
        <el-switch v-model="formData.isForCompensation" active-text="是" inactive-text="否" />
      </el-form-item>
      <el-form-item v-if="showConfig.triggerable" label="服务任务可触发" prop="triggerable">
        <el-switch v-model="formData.triggerable" active-text="是" inactive-text="否" />
      </el-form-item>
      <el-form-item
        v-if="showConfig.autoStoreVariables"
        label="自动存储变量"
        prop="autoStoreVariables"
      >
        <el-switch v-model="formData.autoStoreVariables" active-text="是" inactive-text="否" />
      </el-form-item>
      <el-form-item v-if="showConfig.ruleVariablesInput" label="输入变量" prop="ruleVariablesInput">
        <el-input v-model="formData.ruleVariablesInput" />
      </el-form-item>
      <el-form-item v-if="showConfig.rules" label="规则" prop="rules">
        <el-input v-model="formData.rules" />
      </el-form-item>
      <el-form-item v-if="showConfig.resultVariable" label="结果变量" prop="resultVariable">
        <el-input v-model="formData.resultVariable" />
      </el-form-item>
      <el-form-item v-if="showConfig.exclude" label="排除" prop="exclude">
        <el-switch v-model="formData.exclude" active-text="是" inactive-text="否" />
      </el-form-item>
      <el-form-item v-if="showConfig.class" label="类" prop="class">
        <el-input v-model="formData.class" />
      </el-form-item>
      <el-form-item v-if="showConfig.dueDate" label="到期时间" prop="dueDate">
        <el-date-picker v-model="formData.dueDate" value-format="YYYY-MM-DD HH:mm:ss" />
      </el-form-item>
    </el-form>
    <executionListenerDialog
      v-if="dialogName === 'executionListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishExecutionListener"
    />
    <taskListenerDialog
      v-if="dialogName === 'taskListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishTaskListener"
    />
    <multiInstanceDialog
      v-if="dialogName === 'multiInstanceDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishMultiInstance"
    />
    <el-dialog
      title="选择人员"
      v-if="userVisible"
      v-model="userVisible"
      width="60%"
      append-to-body
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <flow-user
        ref="FlowUserRef"
        :checkType="checkType"
        :selectValues="selectValues"
        @handle-user-select="handleUserSelect"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="userVisible = false">取 消</el-button>
          <el-button type="primary" @click="checkUserComplete">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      title="选择表达式"
      v-model="expVisible"
      width="60%"
      append-to-body
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <flow-exp :selectValues="selectValues" @handle-single-exp-select="handleSingleExpSelect" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="expVisible = false">取 消</el-button>
          <el-button type="primary" @click="checkExpComplete">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      title="选择角色"
      v-if="roleVisible"
      v-model="roleVisible"
      width="60%"
      append-to-body
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <flow-role
        ref="FlowRoleRef"
        :checkType="checkType"
        :selectValues="selectValues"
        @handle-role-select="handleRoleSelect"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="roleVisible = false">取 消</el-button>
          <el-button type="primary" @click="checkRoleComplete">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      title="选择岗位"
      v-if="postVisible"
      v-model="postVisible"
      width="60%"
      append-to-body
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <flow-post
        ref="FlowPostRef"
        :checkType="checkType"
        :selectValues="selectValues"
        @handle-post-select="handlePostSelect"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="postVisible = false">取 消</el-button>
          <el-button type="primary" @click="checkPostComplete">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, watch, defineProps, nextTick } from 'vue';
  import mixinPanel from '../../common/mixinPanel';
  import executionListenerDialog from './property/executionListener';
  import taskListenerDialog from './property/taskListener';
  import multiInstanceDialog from './property/multiInstance';
  import { commonParse, userTaskParse } from '../../common/parseElement';
  import { StrUtil } from '@/utils/StrUtil';
  import FlowUser from '@/components/flow/User';
  import FlowRole from '@/components/flow/Role';
  import FlowExp from '@/components/flow/Expression';
  import FlowPost from '@/components/flow/Post';
  import vkBeautify from 'vkbeautify';
  // import { listAllForm } from '@/api/flowable/form';

  const props = defineProps({
    users: {
      type: Array,
      required: true,
    },
    groups: {
      type: Array,
      required: true,
    },
    postList: {
      type: Array,
      default: () => [],
    },
    exps: {
      type: Array,
      required: true,
    },
    modeler: {
      type: Object,
      required: true,
    },
    element: {
      type: Object,
      required: true,
    },
    categorys: {
      type: Array,
      default: () => [],
    },
  });

  const formData = ref({});
  const formRules = ref({
    id: [{ required: true, message: 'Id 不能为空' }],
    name: [{ required: true, message: '节点名称不能为空' }],
  });

  const { showConfig, updateProperties } = mixinPanel(props.modeler, props.element, formData);

  // 根据各自项目需求定制，可配置为字典
  const userTypeOption = ref([
    { label: '指定人员', value: 'assignee' },
    // { label: '候选人员', value: 'candidateUsers' },
    // { label: '候选角色', value: 'candidateGroups' },
    { label: '本部门角色', value: 'deptRole' },
    { label: '本组织角色', value: 'orgRole' },
    { label: '本公司角色', value: 'companyRole' },
    { label: '本部门岗位', value: 'deptPost' },
    { label: '本组织岗位', value: 'orgPost' },
    { label: '本公司岗位', value: 'companyPost' },
    { label: '发起人', value: 'initiator' },
  ]);
  const dialogName = ref('');
  const executionListenerLength = ref(0);
  const taskListenerLength = ref(0);
  const hasMultiInstance = ref(false);
  const userVisible = ref(false);
  const roleVisible = ref(false);
  const expVisible = ref(false);
  const postVisible = ref(false);
  // const assignee = ref(null);
  // const candidateUsers = ref(null);
  // const candidateGroups = ref(null);
  // 选类型
  const checkType = ref('single');
  // 选中的值
  const checkValues = ref(null);
  // 数据回显
  const selectValues = ref(null);
  // 用户列表
  const userList = ref(props.users);
  // 角色列表
  const groupList = ref(props.groups);
  // 岗位列表
  const postList = ref(props.postList);
  // 表达式列表
  const expList = ref(props.exps);
  // 表达式类型
  const expType = ref(null);
  // 表单列表
  // const formList = ref([]);
  const FlowUserRef = ref(null);
  const FlowRoleRef = ref(null);
  const FlowPostRef = ref(null);

  watch(
    () => formData.value.userType,
    (val, oldVal) => {
      if (StrUtil.isNotBlank(oldVal)) {
        delete props.element.businessObject.$attrs[`flowable:${oldVal}`];
        delete formData.value[oldVal];
        // 清除已选人员数据
        checkValues.value = '';
        selectValues.value = null;
        // 删除xml中已选择数据类型节点
        delete props.element.businessObject.$attrs[`flowable:dataType`];
        updateProperties({ 'flowable:assignee': '' });
      }
      // 写入userType节点信息到xml
      updateProperties({ 'flowable:userType': val });
      if (val === 'initiator') {
        updateProperties({ 'flowable:assignee': '${initiatorId}' });
      }
    },
  );

  watch(
    () => formData.value.async,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ 'flowable:async': val });
      }
    },
  );

  watch(
    () => formData.value.dueDate,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ 'flowable:dueDate': val });
      }
    },
  );

  watch(
    () => formData.value.formKey,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ 'flowable:formKey': val });
      } else {
        // 删除xml中已选择表单信息
        delete props.element.businessObject[`formKey`];
      }
    },
  );

  watch(
    () => formData.value.priority,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ 'flowable:priority': val });
      }
    },
  );

  watch(
    () => formData.value.skipExpression,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ 'flowable:skipExpression': val });
      } else {
        delete props.element.businessObject.$attrs[`flowable:skipExpression`];
      }
    },
  );

  watch(
    () => formData.value.isForCompensation,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ isForCompensation: val });
      }
    },
  );

  watch(
    () => formData.value.triggerable,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ 'flowable:triggerable': val });
      }
    },
  );

  watch(
    () => formData.value.class,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ 'flowable:class': val });
      }
    },
  );

  watch(
    () => formData.value.autoStoreVariables,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ 'flowable:autoStoreVariables': val });
      }
    },
  );

  watch(
    () => formData.value.exclude,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ 'flowable:exclude': val });
      }
    },
  );

  watch(
    () => formData.value.ruleVariablesInput,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ 'flowable:ruleVariablesInput': val });
      }
    },
  );

  watch(
    () => formData.value.rules,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ 'flowable:rules': val });
      }
    },
  );

  watch(
    () => formData.value.resultVariable,
    (val) => {
      if (StrUtil.isNotBlank(val)) {
        updateProperties({ 'flowable:resultVariable': val });
      }
    },
  );

  function computedExecutionListenerLength() {
    executionListenerLength.value =
      props.element.businessObject.extensionElements?.values?.filter(
        (item) => item.$type === 'flowable:ExecutionListener',
      ).length ?? 0;
  }

  function computedTaskListenerLength() {
    taskListenerLength.value =
      props.element.businessObject.extensionElements?.values?.filter(
        (item) => item.$type === 'flowable:TaskListener',
      ).length ?? 0;
  }

  function computedHasMultiInstance() {
    if (props.element.businessObject.loopCharacteristics) {
      hasMultiInstance.value = true;
    } else {
      hasMultiInstance.value = false;
    }
  }

  // 获取表单信息
  // function getListForm() {
  //   listAllForm().then((res) => {
  //     res.data.forEach((item) => {
  //       item.formId = item.formId.toString();
  //     });
  //     formList.value = res.data;
  //   });
  // }

  // 设计器右侧表单数据回显
  function checkValuesEcho() {
    const attrs = props.element.businessObject.$attrs;
    const businessObject = props.element.businessObject;
    // 指定用户
    // eslint-disable-next-line
    if (attrs.hasOwnProperty('flowable:assignee')) {
      const val = attrs['flowable:assignee'];
      // 查找是否动态指定人员(选中流程表达式)
      if (attrs['flowable:dataType'] === 'dynamic') {
        checkValues.value = expList.value.find((item) => item.expression == val).name;
        selectValues.value = expList.value.find((item) => item.expression == val).id;
      } else {
        if (val === '${initiatorId}') {
          updateProperties({
            'flowable:assignee': '${initiatorId}',
          });
          return;
        }
        if (typeof val == 'string' && val.indexOf('roleAssigneeSelect') !== -1) {
          const reg =
            /^\$\{assigneePicker\.assignee\(execution\.getVariable\('processCreateUserId'\), '(?<funcName>[a-zA-Z0-9]+)\((?<json>.*)\)'\)\}$/;
          const match = reg.exec(`${val}`);
          // console.log(match.groups.funcName);
          // console.log(match.groups.json);
          const params = JSON.parse(match.groups.json);
          const { roles } = params;
          if (roles.length) {
            checkValues.value = [];
            selectValues.value = [];
            roles.forEach((item) => {
              const idx = groupList.value.findIndex((f) => f.roleId == item);
              if (idx !== -1) {
                checkValues.value.push(groupList.value[idx].roleName);
                selectValues.value.push(groupList.value[idx].roleId);
              }
            });
            return;
          }
          checkValues.value = groupList.value.find((item) => item.roleId == roles)?.roleName;
          selectValues.value = groupList.value.find((item) => item.roleId == roles)?.roleId;
          return;
        }
        if (typeof val == 'string' && val.indexOf('postAssigneeSelect') !== -1) {
          const reg =
            /^\$\{assigneePicker\.assignee\(execution\.getVariable\('processCreateUserId'\), '(?<funcName>[a-zA-Z0-9]+)\((?<json>.*)\)'\)\}$/;
          const match = reg.exec(`${val}`);
          // console.log(match.groups.funcName);
          // console.log(match.groups.json);
          const params = JSON.parse(match.groups.json);
          const { posts } = params;
          if (posts.length) {
            checkValues.value = [];
            selectValues.value = [];
            posts.forEach((item) => {
              const idx = postList.value.findIndex((f) => f.postId == item);
              if (idx !== -1) {
                checkValues.value.push(postList.value[idx].postName);
                selectValues.value.push(postList.value[idx].postId);
              }
            });
            return;
          }
          checkValues.value = postList.value.find((item) => item.postId == posts)?.postName;
          selectValues.value = postList.value.find((item) => item.postId == posts)?.postId;
          return;
        }
        checkValues.value = userList.value.find((item) => item.userId == val)?.nickName;
        selectValues.value = userList.value.find((item) => item.userId == val)?.userId;
      }
      // 候选用户
      // eslint-disable-next-line
    } else if (attrs.hasOwnProperty('flowable:candidateUsers')) {
      const val = attrs['flowable:candidateUsers'];
      if (attrs['flowable:dataType'] === 'dynamic') {
        checkValues.value = expList.value.find((item) => item.expression == val)?.name;
        selectValues.value = expList.value.find((item) => item.expression == val)?.id;
      } else {
        const newArr = userList.value.filter((i) => val.split(',').includes(i.userId));
        checkValues.value = newArr.map((item) => item.nickName).join(',');
        selectValues.value = newArr.map((item) => item.userId).join(',');
      }
    } else if (
      // eslint-disable-next-line
      businessObject.hasOwnProperty('candidateGroups') ||
      // eslint-disable-next-line
      attrs.hasOwnProperty('flowable:candidateGroups')
    ) {
      // 候选角色信息
      const val = businessObject['candidateGroups'] || attrs['flowable:candidateGroups'];
      if (attrs['flowable:dataType'] === 'dynamic') {
        checkValues.value = expList.value.find((item) => item.expression == val)?.name;
        selectValues.value = expList.value.find((item) => item.expression == val)?.id;
      } else {
        const newArr = groupList.value.filter((i) => val.split(',').includes(i.roleId));
        checkValues.value = newArr.map((item) => item.roleName).join(',');
        selectValues.value = newArr.map((item) => item.roleId).join(',');
      }
    }
  }

  function finishExecutionListener() {
    if (dialogName.value === 'executionListenerDialog') {
      computedExecutionListenerLength();
    }
    dialogName.value = '';
  }

  function finishTaskListener() {
    if (dialogName.value === 'taskListenerDialog') {
      computedTaskListenerLength();
    }
    dialogName.value = '';
  }

  function finishMultiInstance() {
    if (dialogName.value === 'multiInstanceDialog') {
      computedHasMultiInstance();
    }
    dialogName.value = '';
  }

  /*单选人员*/
  function singleUserCheck() {
    userVisible.value = true;
    checkType.value = 'single';
  }

  /*多选人员*/
  // eslint-disable-next-line
  function multipleUserCheck() {
    userVisible.value = true;
    checkType.value = 'multiple';
  }

  /*单选角色*/
  // eslint-disable-next-line
  function singleRoleCheck() {
    roleVisible.value = true;
    checkType.value = 'single';
  }

  /*多选角色*/
  function multipleRoleCheck() {
    roleVisible.value = true;
    checkType.value = 'multiple';
  }

  // 多选岗位
  function multiplePostCheck() {
    postVisible.value = true;
    checkType.value = 'multiple';
  }

  /*单选表达式*/
  // eslint-disable-next-line
  function singleExpCheck(_expType) {
    expVisible.value = true;
    expType.value = _expType;
  }

  // 选中表达式
  function handleSingleExpSelect(selection) {
    deleteFlowAttar();
    updateProperties({ 'flowable:dataType': 'dynamic' });
    if ('assignee' === expType.value) {
      updateProperties({ 'flowable:assignee': selection.expression });
    } else if ('candidateUsers' === expType.value) {
      updateProperties({ 'flowable:candidateUsers': selection.expression });
    } else if ('candidateGroups' === expType.value) {
      updateProperties({ 'flowable:candidateGroups': selection.expression });
    }
    checkValues.value = selection.name;
    expType.value = null;
  }

  // 用户选中数据
  function handleUserSelect(selection) {
    if (selection) {
      deleteFlowAttar();
      updateProperties({ 'flowable:dataType': 'fixed' });
      if (selection instanceof Array) {
        const userIds = selection.map((item) => item.userId);
        const nickName = selection.map((item) => item.nickName);
        updateProperties({ 'flowable:candidateUsers': userIds.join(',') });
        checkValues.value = nickName.join(',');
      } else {
        updateProperties({ 'flowable:assignee': selection.userId });
        checkValues.value = selection.nickName;
      }
    }
  }

  // 角色选中数据
  function handleRoleSelect(selection, name) {
    if (selection && name) {
      deleteFlowAttar();
      const obj = {
        deptRole: 'dept',
        orgRole: 'org',
        companyRole: 'enterprise',
      };
      const roleType = obj[formData.value.userType] || '';
      updateProperties({ 'flowable:dataType': 'fixed' });
      const str = `roleAssigneeSelect({"roleType": "${roleType}", "roles":[${selection.split()}]})`;
      const newStr =
        "${assigneePicker.assignee(execution.getVariable('processCreateUserId'), '" + str + "')}";
      updateProperties({
        'flowable:assignee': vkBeautify.xml(newStr),
      });
      checkValues.value = name;
    }
  }

  // 岗位选中数据
  function handlePostSelect(selection, name) {
    if (selection && name) {
      deleteFlowAttar();
      const obj = {
        deptPost: 'dept',
        orgPost: 'org',
        companyPost: 'enterprise',
      };
      const postType = obj[formData.value.userType] || '';
      updateProperties({ 'flowable:dataType': 'fixed' });
      const str = `postAssigneeSelect({"postType": "${postType}", "posts":[${selection.split()}]})`;
      const newStr =
        "${assigneePicker.assignee(execution.getVariable('processCreateUserId'), '" + str + "')}";
      updateProperties({
        'flowable:assignee': vkBeautify.xml(newStr),
      });
      checkValues.value = name;
    }
  }

  /*用户选中赋值*/
  function checkUserComplete() {
    FlowUserRef.value.transmitSingleUserSelect();
    userVisible.value = false;
    checkType.value = '';
  }

  /*指定角色选中赋值*/
  function checkRoleComplete() {
    FlowRoleRef.value.transmitMultipleRoleSelect();
    roleVisible.value = false;
    checkType.value = '';
  }

  /*指定岗位选中赋值*/
  function checkPostComplete() {
    FlowPostRef.value.transmitMultiplePostSelect();
    postVisible.value = false;
    checkType.value = '';
  }

  /*表达式选中赋值*/
  function checkExpComplete() {
    expVisible.value = false;
  }

  // 删除节点
  function deleteFlowAttar() {
    delete props.element.businessObject.$attrs[`flowable:dataType`];
    delete props.element.businessObject.$attrs[`flowable:assignee`];
    delete props.element.businessObject.$attrs[`flowable:candidateUsers`];
    delete props.element.businessObject.$attrs[`flowable:candidateGroups`];
  }

  function init() {
    let cache = commonParse(props.element);
    cache = userTaskParse(cache);
    formData.value = cache;
    computedExecutionListenerLength();
    computedTaskListenerLength();
    computedHasMultiInstance();
    // 人员信息回显
    checkValuesEcho();
    // 加载表单列表
    // getListForm();
    dialogName.value = 'taskListenerDialog';
    nextTick(() => {
      dialogName.value = '';
    });
  }

  init();
</script>

<style scoped lang="scss"></style>
